<template>
  <div class="mobile-list">
    <!-- 筛选表单 -->
    <mobile-filter-form
      :loading="loading"
      @search="handleSearch"
      @reset="handleReset"
      v-if="showFilter">
      <slot name="filter"></slot>
    </mobile-filter-form>

    <!-- 列表内容 -->
    <div class="list-content">
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      <div v-else-if="!dataList || dataList.length === 0" class="empty-container">
        <el-empty :description="emptyText"></el-empty>
      </div>
      <div v-else>
        <slot :data="dataList"></slot>
      </div>
    </div>

    <!-- 分页 -->
    <mobile-pagination
      v-if="showPagination && total > 0"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :page-sizes="pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import MobileFilterForm from '@/components/MobileFilterForm';
import MobilePagination from '@/components/MobilePagination';

export default {
    name: 'MobileList',
    components: {
        MobileFilterForm,
        MobilePagination
    },
    props: {
        loading: {
            type: Boolean,
            default: false
        },
        dataList: {
            type: Array,
            default: () => []
        },
        total: {
            type: Number,
            default: 0
        },
        currentPage: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        },
        pageSizes: {
            type: Array,
            default: () => [10, 20, 30, 50]
        },
        emptyText: {
            type: String,
            default: '暂无数据'
        },
        showFilter: {
            type: Boolean,
            default: true
        },
        showPagination: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        handleSearch () {
            this.$emit('search');
        },
        handleReset () {
            this.$emit('reset');
        },
        handleSizeChange (val) {
            this.$emit('size-change', val);
        },
        handleCurrentChange (val) {
            this.$emit('current-change', val);
        }
    }
};
</script>

<style lang="scss" scoped>
.mobile-list {
  .loading-container, .empty-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
  }
}
</style>
